{% load static %}
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="{% static 'vendor/jquery-ui/jquery-ui.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'js/template/slick.js' %}"></script>
<script src="{% static 'js/template/base.js' %}"></script>

<script>
    $(document).ready(function () {
        // 自动初始化主功能
        whirMain.init();
    });
</script>
<header id="main-header">
    <section class="auto-inner clearfix">
        <h1 class="logo nm">
            <a href="/"> 
                <!-- <img src="{% static 'img/logo.png' %}" class="default" alt="河南省华帝建设工程有限公司"> -->
                <img src="{% static 'img/logo-block.png' %}" class="show" alt="河南省华帝建设工程有限公司"> </a>
            <!-- <span style="margin-top: 20px;">河南省华帝建设工程有限公司</span> -->
        </h1>
        <dl class="header-nav">
            <dt><span class="open-menu"><i></i><i></i><i></i></span></dt>
        </dl>
        <menu class="top-menu">
            <ul class="ul clearfix">
                <li>
                    <aside><a href="/">首页</a></aside>
                </li>
                <li>
                    <aside><a href="/business">业务领域</a></aside>
                </li>
                <li>
                    <aside><a href="/news">中标业绩</a></aside>
                </li>
                <li>
                    <aside><a href="/dynamic">工程动态</a></aside>
                </li>
                <li>
                    <aside><a href="/honour">企业荣耀</a></aside>
                </li>
                <li>
                    <aside><a href="/about_us">关于我们</a></aside>
                </li>
                <li>
                    <aside><a href="/contact_us">联系我们</a></aside>
                </li>
            </ul>
        </menu>
    </section>
</header>

<script>
    var whirMain = {
        init: function () {
            this.top();
            this.home();
            this.pc();
            this.bottom();
            this.homeBan();
        },
        top: function () {

            // 获取当前页面 URL 的路径部分
            var currentPath = window.location.pathname;

            // 遍历所有的导航菜单项，设置相应的活动类
            document.querySelectorAll('menu li').forEach(function (li) {
                var link = li.querySelector('a');
                if (link) {
                    var href = link.getAttribute('href');

                    // 判断当前路径是否匹配导航链接
                    if (href === '/') {
                        if (currentPath === '/') {
                            li.classList.add("aon");
                        }
                    } else if (currentPath.startsWith(href)) {
                        li.classList.add("aon");
                    }
                }

                // 添加 hover 事件，用于鼠标悬停效果
                li.addEventListener('mouseenter', function () {
                    li.classList.add("aon");
                    Array.from(li.parentElement.children).forEach(sibling => {
                        if (sibling !== li) sibling.classList.remove("aon");
                    });
                });
                li.addEventListener('mouseleave', function () {
                    li.classList.remove("aon");

                    // 再次判断当前路径，以确保正确的导航项被高亮显示
                    document.querySelectorAll('menu li').forEach(function (innerLi) {
                        var innerLink = innerLi.querySelector('a');
                        if (innerLink) {
                            var innerHref = innerLink.getAttribute('href');
                            if ((innerHref === '/' && currentPath === '/') ||
                                (innerHref !== '/' && currentPath.startsWith(innerHref))) {
                                innerLi.classList.add("aon");
                            }
                        }
                    });
                });
            });
            $(function ($) {
                $(window).on("resize", function () {
                    if ($(window).width() > 1025) {
                        whirMain.pc();
                    } else {
                        whirMain.wap();
                    }
                }).trigger("resize");
            });

            $("header").hover(function () {
                $(this).addClass("hover")
            }, function () {
                var stop = $(window).scrollTop()
                if (stop < $(".home-ban").height() || stop < $(".top-contont").height()) {
                    $(this).removeClass("hover")
                }
            });

            $(window).scroll(function () {
                var before = $(window).scrollTop();
                if ($(window).scrollTop() > 0) {
                    $("header").addClass("hover")
                } else {
                    $("header").removeClass("hover")
                }

                $(window).scroll(function () {
                    var after = $(window).scrollTop();
                    if (before < after) {
                        $("header").addClass("Down");
                        before = after;
                    }
                    if (before > after) {
                        $("header").removeClass("Down");
                        before = after;
                    }
                })

            })
        },
        pc: function () {
            $(".has-sub").mouseDelay(false).hover(function () {
                $(this).find(".sub").slideDown(300);
                $(this).siblings().find(".sub").slideUp(300);

                var subw = $(this).find(".sub").outerWidth(),
                    this_pleft = $(this).position().left + $(this).outerWidth(),
                    ww = $(window).width(),
                    right_w = ww - this_pleft;
                if (subw >= right_w) {
                    var leftcss = subw - right_w;
                    $(this).find(".sub").css("left", -leftcss);
                } else {
                    $(this).find(".sub").css("left", "");
                }
            }, function () {
                $(this).find(".sub").slideUp(300);
            });
            $("menu").mouseleave(function () {
                $(this).find(".sub").slideUp(300);
            });
        },
        wap: function () {
            $("menu li,menu").unbind();
            $(".has-sub .op").remove();
            $(".has-sub").find("aside").append("<i class='op'></i>");
            $('.op').click(function () {
                $(this).toggleClass("click");
                $(this).parent().next(".sub").slideToggle();
                $(this).parent().parent().siblings().find(".op").removeClass("click");
                $(this).parent().parent().siblings().find(".sub").slideUp();
            });
            // 打开移动端导航
            $(".open-menu").unbind();
            whirOpen.open(".open-menu", "body", "menu-show", "menu");
        },
        bottom: function () {
            // 原有的bottom方法内容
        },
        home: function () {
            $('.img-slider .slider').slick({
                slidesToShow: 4,
                arrows: false,
                responsive: [
                    { breakpoint: 1024, settings: { autoplay: true, slidesToShow: 3 } }
                ]
            });

            $('.Floor003105 .slider .ul').slick({
                slidesToShow: 1,
                centerMode: true,
                centerPadding: 0,
                autoplay: true,
                speed: 1000
            });

            $(".home-news .tabs li").hover(function () {
                var e = $(this).index()
                $(this).addClass("on").siblings().removeClass("on")
                $(".home-news .tabs-ul ul").eq(e).addClass("show").siblings().removeClass("show")
            });
            $(".home-news .tabs li").eq(0).addClass("on").siblings().removeClass("on")
            $(".home-news .tabs-ul ul").eq(0).addClass("show").siblings().removeClass("show")
        },
        homeBan: function () {
            $(".home-ban .slider").slick({
                autoplay: true,
                arrows: false,
                speed: 1200,
                fade: true
            });
            $(".home-ban .slider li.slick-current").addClass("ani-show")
            $(".home-ban .slider").on('afterChange', function (event, slick, currentSlide, nextSlide) {
                $(".home-ban .slider li.slick-current").addClass("ani-show").siblings().removeClass("ani-show")
            });

            $(".business-ban .controls dd").hover(function () {
                var e = $(this).index()
                $(this).addClass("on").siblings().removeClass("on");
                $(".business-ban .list li").eq(e).fadeIn().siblings().fadeOut();
                $(".business-ban .list li").eq(e).addClass("ani-show").siblings().removeClass("ani-show")
                $(".business-ban .list").addClass("show")
            });
            $(".business-ban .controls").mouseleave(function () {
                $(".business-ban .list").removeClass("show");
                $(".business-ban .controls dd").removeClass("on");
                $(".business-ban .list li").fadeOut().removeClass("ani-show");
            })
        }
    };

    $(document).ready(function () {
        // 自动初始化
        whirMain.init();
    });

    var whirOpen = {
        video: function () {
            $(".open-video").click(function () {
                var files = $(this).data("files")
                $(this).parent().siblings().find(".video").remove();
                $(this).parent().append("<div class='video'><a class='close'></a><video src='" + files + "' controls autoplay  x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true' webkit-playsinline='true' playsinline='true'></video></div>");
                videoclose();
            });
            function videoclose() {
                $(".video .close").click(function (e) {
                    $(this).parent().remove();
                });
            }
        },
        open: function (btn, main, css, out) {
            $(btn).click(function (e) {
                $(main).toggleClass(css);
                $(document).on("click", function () {
                    $(main).removeClass(css);
                });
                e.stopPropagation();
            });
            $(out).on("click", function (e) {
                e.stopPropagation();
            });
        },
        toggle: function (a, b) {
            $(a).click(function (e) {
                $(this).toggleClass("on");
                $(b).stop(true, true).fadeToggle();
                $(document).on("click", function () {
                    $(b).stop(true, true).fadeOut();
                    $(a).removeClass("on");
                });
                e.stopPropagation();
            });
            $(b).on("click", function (e) {
                e.stopPropagation();
            });
        }
    };
</script>